<script setup lang='ts'>
import { Component, onMounted, ref } from 'vue';
import LeftNavBar from '../LeftNavBar/index.vue'
import NavInput from '../NavInput/index.vue'
import RightNavBar from '../RightNavBar/index.vue'


const navbarRef = ref<HTMLElement>()

type LeftBarInstance = InstanceType<typeof LeftNavBar>
type RightBarInstance = InstanceType<typeof RightNavBar>
const LeftBar = ref<LeftBarInstance>()
const RightBar = ref<RightBarInstance>()

onMounted(() => {

    document.addEventListener('scroll', () => {
        const dom = document.querySelector('html') as HTMLElement
        if (dom.scrollTop > 0) {
            (navbarRef.value as HTMLElement).classList.add('navbar-fixed', 'animate__animated', 'animate__fadeIn');
            (LeftBar.value as LeftBarInstance).setScroll(true);
            (RightBar.value as LeftBarInstance).setScroll(true)
        } else {
            (navbarRef.value as HTMLElement).classList.remove('navbar-fixed', 'animate__animated', 'animate__fadeIn');
            (LeftBar.value as LeftBarInstance).setScroll(false);
            (RightBar.value as LeftBarInstance).setScroll(false)
        }
    })
})
</script>
<template>
    <div class="bili-header">
        <img class="header-bg" src="../../assets/header.png" alt="">
        <div class="top-navBar" ref="navbarRef">
            <left-nav-bar ref="LeftBar"></left-nav-bar>
            <nav-input></nav-input>
            <right-nav-bar ref="RightBar"></right-nav-bar>
        </div>
    </div>
</template>
<style lang='less' scoped>
.bili-header {
    height: 155px;
    position: relative;

    .header-bg {
        z-index: -999;
        position: absolute;
    }

    .navbar-fixed {
        position: fixed !important;
        z-index: 999;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);

        // :deep(.link-list),
        // :deep(.item) {
        //     color: #000
        // }

        // :deep(.link-list) {
        //     li:first-child {
        //         .icon {
        //             display: none;
        //         }
        //     }
        // }
    }

    .top-navBar {
        display: flex;
        position: absolute;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        box-sizing: border-box;
    }
}
</style>